<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <!-- 每隔900s刷新页面 -->
  <meta http-equiv="Refresh" content="900" />
  <title>用户列表</title>
  <link rel="shortcut icon" href="./img/logo.png" type="image/png" />
  <link rel="stylesheet" href="./css/common.css" type="text/css" />
  <link rel="stylesheet" href="./css/users.css" type="text/css" />
  <link rel="stylesheet" href="./css/pagination.css" type="text/css" />
  <script src="./js/utils.js"></script>
  <!-- 登录拦截器拦截 -->
  <script src="./js/intercepter.js"></script>
</head>

<body>
  <div class="box">
    <!-- 1 搜索框 -->
    <div class="opt">
      <div class="search-box">
        <input type="text" placeholder="输入用户名关键字" class="search-input" />
        <button class="search-btn">🔍</button>
        <div class="add-btn">＋添加用户</div>
      </div>
      <div class="welcome">
        欢迎您:<span class="login-name">admin</span>
        <div class="logout">退出</div>
      </div>
    </div>
    <!-- 2 当前页的用户列表 -->
    <table class="users-table"></table>
    <!-- 3 分页器 -->
    <div class="page-nation">
      <div class="page-nation-left">
        共<span class="total">23</span>页，
        第<span class="pageNum">1</span>页
      </div>
      <div class="page-nation-right">
        <div class="first-page">首页</div>
        <div class="pre-page">上一页</div>
        <div class="next-page">下一页</div>
        <div class="last-page">尾页</div>
        <div class="goto-pageNum-div"><input type="text" class="goto-pageNum" value="1" /></div>
        <div class="btn">GO</div>
        <select name="pageSize" id="pageSize">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </div>
    </div>
  </div>
  <!-- 4 添加用户对话框 -->
  <div class="add-dialog">
    <div class="content">
      <div class="headers">
        <div class="title">添加用户</div>
        <div class="colse-btn">×</div>
      </div>
      <div class="bodys">
        <form action="javascript:void(0)" class="add-form">
          <!-- 4-1 用户编码 -->
          <div class="form-item">
            <div class="info">
              <label for="userCode">用户编码</label>
              <input type="text" id="userCode" placeholder="输入用户编码" />
            </div>
            <!-- 验证信息 -->
            <div class="valid valid-userCode"></div>
          </div>
          <!-- 4-2 用户名称 -->
          <div class="form-item">
            <div class="info">
              <label for="userName">用户名称</label>
              <input type="text" id="userName" placeholder="输入用户名" />
            </div>
            <div class="valid valid-userName"></div>
          </div>
          <!-- 4-3 用户名称 -->
          <div class="form-item">
            <div class="info">
              <label for="userPassword">用户密码</label>
              <input type="text" id="userPassword" placeholder="用户密码" />
            </div>
            <div class="valid valid-userPassword"></div>
          </div>
          <!-- 4-4 用户性别-->
          <div class="form-item">
            <div class="info">
              <label>用户性别</label>
              <input type="radio" class="gender" name="gender" value='2' checked />&nbsp;女&nbsp;&nbsp;
              <input type="radio" class="gender" name="gender" value='1' />&nbsp;男
            </div>
          </div>
          <!-- 4-5 用户电话 -->
          <div class="form-item">
            <div class="info">
              <label for="phone">用户电话</label>
              <input type="text" id="phone" placeholder="用户电话" />
            </div>
            <div class="valid valid-phone"></div>
          </div>
          <!-- 4-6 用户角色 -->
          <div class="form-item">
            <div class="info">
              <label for="userRole">用户角色</label>
              <select id="userRole">
                <option value="1">系统管理员</option>
                <option value="2">经理</option>
                <option value="3" selected>普通用户</option>
                <option value="4">老板</option>
              </select>
            </div>
            <div class="valid valid-phone"></div>
          </div>
          <!-- 4-7 用户生日 -->
          <div class="form-item">
            <div class="info">
              <label for="birthday">用户生日</label>
              <input type="date" id="birthday" placeholder="用户生日" />
            </div>
            <div class="valid valid-birthday"></div>
          </div>
          <!-- 4-8 用户地址 -->
          <div class="form-item">
            <div class="info">
              <label for="address">用户地址</label>
              <input type="text" id="address" placeholder="用户地址" />
            </div>
            <div class="valid valid-address"></div>
          </div>
        </form>
      </div>
      <div class="foots">
        <div class="cancel-add">取 消</div>
        <div class="confirm-add">确 定</div>
      </div>
    </div>
  </div>
  <!-- 5 用户详情对话框 -->
  <div class="detail-dialog">
    <div class="content">
      <div class="headers">
        <div class="title">用户详情</div>
        <div class="colse-btn">×</div>
      </div>
      <div class="bodys">
        <div class="item">
          <div class="key"></div>
          <div class="value"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 6 修改对话框 -->
  <div class="update-dialog">
    <div class="content">
      <div class="headers">
        <div class="title">修改用户</div>
        <div class="colse-btn">×</div>
      </div>
      <div class="bodys">
        <form action="javascript:void(0)" class="update-form">
          <input type="hidden" id="hidden-id" />
          <!-- 6-1 用户编码 -->
          <div class="form-item">
            <div class="info">
              <label for="userCode">用户编码</label>
              <input type="text" id="userCode" disabled placeholder="输入用户编码" />
            </div>
            <div class="valid valid-userCode"></div>
          </div>
          <!-- 6-2 用户名称 -->
          <div class="form-item">
            <div class="info">
              <label for="userName">用户名称</label>
              <input type="text" id="userName" placeholder="输入用户名" />
            </div>
            <div class="valid valid-userName"></div>
          </div>
          <!-- 6-3 用户名称 -->
          <!-- <div class="form-item">
            <div class="info">
              <label for="userPassword">用户密码</label>
              <input type="text" id="userPassword" placeholder="用户密码" />
            </div>
            <div class="valid valid-userPassword"></div>
          </div> -->
          <!-- 6-4 用户性别-->
          <div class="form-item">
            <div class="info">
              <label>用户性别</label>
              <input type="radio" class="gender" name="gender" value='2' checked />&nbsp;女&nbsp;&nbsp;
              <input type="radio" class="gender" name="gender" value='1' />&nbsp;男
            </div>
          </div>
          <!-- 6-5 用户电话 -->
          <div class="form-item">
            <div class="info">
              <label for="phone">用户电话</label>
              <input type="text" id="phone" placeholder="用户电话" />
            </div>
            <div class="valid valid-phone"></div>
          </div>
          <!-- 6-6 用户角色 -->
          <div class="form-item">
            <div class="info">
              <label for="userRole">用户角色</label>
              <select id="userRole">
                <option value="1">系统管理员</option>
                <option value="2">经理</option>
                <option value="3" selected>普通用户</option>
                <option value="4">老板</option>
              </select>
            </div>
            <div class="valid valid-userRole"></div>
          </div>
          <!-- 6-7 用户生日 -->
          <div class="form-item">
            <div class="info">
              <label for="birthday">用户生日</label>
              <input type="date" id="birthday" placeholder="用户生日" />
            </div>
            <div class="valid valid-birthday"></div>
          </div>
          <!-- 6-8 用户地址 -->
          <div class="form-item">
            <div class="info">
              <label for="address">用户地址</label>
              <input type="text" id="address" placeholder="用户地址" />
            </div>
            <div class="valid valid-address"></div>
          </div>
        </form>
      </div>
      <div class="foots">
        <div class="cancel-add">取 消</div>
        <div class="confirm-add">确 定</div>
      </div>
    </div>
  </div>
  <script src="./js/users.js"></script>
</body>

</html>